<template>
  <div class="introduction">
    <h2>系统功能简介</h2>
    <div v-for="(paragraph, index) in intro" :key="index" class="paragraph-container">
      <img src="/img/img1.png" alt="icon" class="paragraph-icon"/>
      <p>{{ paragraph }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref} from 'vue';
const intro =ref(["酒店管理系统分为三个身份登录",
"管理员可使用系统对顾客、前台员工及酒店所有信息进行管理还可以查看营业情况统计报表",
"前台员工可以使用系统进行客房预订、入住登记和结账服务，也可以对顾客信息和客房信息进行管理",
"顾客可以使用系统进行房间查询和预定"]);
</script>

<style scoped>
.introduction {
  padding: 20px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  text-align: left; /* 确保文本左对齐 */
  width: 40%; /* 设置固定宽度 */
  max-width: 400px; /* 设置最大宽度 */
}
.paragraph-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 每个段落之间的间距 */
}

.paragraph-icon {
  margin-right: 10px; /* 图片和文字间的距离 */
  width: 20px; /* 调整图片大小 */
  height: auto;
}
</style>